<template>
  <div class="square-page">
    <!-- 顶部按钮区域 -->
    <div class="top-buttons">
      <div class="left-big-btn" @click="goToTransfer">
        <div class="btn-title">转让</div>
        <div class="btn-desc">这里有许多<br>毛孩子需要<br>新的家</div>
      </div>
      <div class="right-small-btns">
        <div class="small-btn btn-1" @click="goToFindPet">
          <div class="btn-title">寻宠</div>
          <div class="btn-desc">寻找走失的<br>宠物</div>
        </div>
        <div class="small-btn btn-2" @click="goToMatchmaking">
          <div class="btn-title">情缘</div>
          <div class="btn-desc">为宠物寻找<br>伴侣</div>
        </div>
      </div>
    </div>
    
    <!-- 帖子区域 -->
    <div class="posts-container">
      <div class="post-card" v-for="(post, index) in posts" :key="index" @click="viewPost(index)">
        <div :class="['post-image', 'post-image-' + (index % 4 + 1)]"></div>
        <div class="post-info">
          <div class="post-title">{{ post.title }}</div>
          <div class="post-author">{{ post.author }}</div>
          <div class="post-tags">
            <span class="post-tag">{{ post.tag }}</span>
            <span class="post-likes">
              <van-icon name="good-job-o" size="12" />
              {{ post.likes }}
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 帖子数据
const posts = ref([
  { 
    title: '我的宝贝们1', 
    author: '宠友325prgai', 
    tag: '#转让', 
    likes: 9 
  },
  { 
    title: '#68携宠减肥&小狗运动争霸赛来啦!', 
    author: '10.12减重', 
    tag: '#活动', 
    likes: 2 
  },
  { 
    title: '#68携宠减肥&小狗运动争霸赛来啦!', 
    author: '9.12减重', 
    tag: '#活动', 
    likes: 13 
  },
  { 
    title: '金毛-阿田', 
    author: '9.13打卡', 
    tag: '#日常', 
    likes: 24 
  },
  { 
    title: '可爱的布偶猫寻找新家', 
    author: '宠友888abc', 
    tag: '#转让', 
    likes: 15 
  },
  { 
    title: '寻找走失的柯基犬', 
    author: '朝阳区王女士', 
    tag: '#寻宠', 
    likes: 42 
  }
])

// 跳转到转让页面
const goToTransfer = () => {
  console.log('跳转到转让页面')
  // 这里可以添加实际的跳转逻辑
}

// 跳转到寻宠页面
const goToFindPet = () => {
  console.log('跳转到寻宠页面')
  // 这里可以添加实际的跳转逻辑
}

// 跳转到情缘页面
const goToMatchmaking = () => {
  console.log('跳转到情缘页面')
  // 这里可以添加实际的跳转逻辑
}

// 查看帖子详情
const viewPost = (index) => {
  console.log('查看帖子详情', index)
  // 这里可以添加实际的查看逻辑
}
</script>

<style scoped>
.square-page {
  padding-top: 46px; /* 为固定导航栏留出空间 */
  background-color: #f7f8fa;
  min-height: 100vh;
}

/* 顶部按钮区域 - 占屏幕1/4高度 */
.top-buttons {
  display: flex;
  height: 25vh; /* 屏幕高度的1/4 */
  padding: 10px;
  background: white;
  gap: 10px;
}

.left-big-btn {
  flex: 3;
  background: linear-gradient(135deg, #ffb347 0%, #ffcc33 100%);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  padding: 15px;
  box-shadow: 0 4px 8px rgba(255, 179, 71, 0.3);
  cursor: pointer;
}

.right-small-btns {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.small-btn {
  flex: 1;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  padding: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.btn-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}

.btn-desc {
  font-size: 12px;
  text-align: center;
  line-height: 1.4;
}

.btn-1 {
  background: linear-gradient(135deg, #6a89cc 0%, #4a69bd 100%);
}

.btn-2 {
  background: linear-gradient(135deg, #f6b93b 0%, #e55039 100%);
}

/* 帖子区域 */
.posts-container {
  padding: 15px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.post-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.post-image {
  width: 100%;
  height: 150px;
  position: relative;
  overflow: hidden;
}

.post-image-1 {
  background: linear-gradient(135deg, #ffb347 0%, #ffcc33 100%);
}

.post-image-2 {
  background: linear-gradient(135deg, #6a89cc 0%, #4a69bd 100%);
}

.post-image-3 {
  background: linear-gradient(135deg, #f6b93b 0%, #e55039 100%);
}

.post-image-4 {
  background: linear-gradient(135deg, #78e08f 0%, #38ada9 100%);
}

.post-info {
  padding: 10px;
}

.post-title {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 5px;
  line-height: 1.4;
}

.post-author {
  font-size: 12px;
  color: #666;
  margin-bottom: 8px;
}

.post-tags {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.post-tag {
  background: #ffecb3;
  color: #ff9500;
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 10px;
}

.post-likes {
  display: flex;
  align-items: center;
  color: #999;
  font-size: 12px;
}
</style>